<template>
	<el-row class="container">
		
		<el-col :span="24" class="main">
			<!-- <el-scrollbar>
				<aside :class="'menu-expanded'">
					
				</aside>
			</el-scrollbar> -->

			<section class="content-container">
				<transition name="fade" mode="out-in">
					<keep-alive><router-view></router-view></keep-alive>
				</transition>
			</section>
		</el-col>
	</el-row>
</template>

<script>

import { mapState, mapActions } from 'vuex'
import { getAllPermissions, addRole, getRoles, getEntityListForUser } from '@/api/api'
import { isRoleEdit, user } from '@/utils/role.js'
import { printLog } from '@/utils/console.js'

export default {
	name:"MonitorMain",
	computed:{
		isRoleEdit(){
			return isRoleEdit()
		}
	},
	components: {
	},
	data() {
		var validateName = (rule, name, callback) => {
			if (!name || name.length == 0) {
				return callback(new Error('请输入角色名称'));
			} else if (name.indexOf(' ') > 0) {
				return callback(new Error('名称不能含有空格'));
			} else if (this.mRole_Data.find(item => item.name == name)) {
				return callback(new Error('角色名称已存在'));
			} else {
				callback();
			}
		};
		return {
			showOrgORRole:true,
			segmentRadio: 'org',
			dialogAddMemberVisible: false,
			tree_data: [],
			tree_data2: [],
			
			mRole_Data: [],//角色列表
			defaultRolePath:'',
			selectRolePath:'',
			defaultOrgPath:'',
			defaultActivePath:'',
			selectOrgPath:'',
			isShowRoleDialog:false
		}
	},
	methods: {
		closeRoleDialog(isRefresh) {
			
		},
		
	},
	mounted() {
		printLog("OrganizationMain   mounted");
	},
	
    watch: {
	  "$store.getters.ispTreeChange": "getAllPartyTree", // 监听url变化，会执行对应方法
	  "$store.getters.isRoleChange": 'getAllRoles',
	  "$store.getters.isTreeDelete": 'resetSelectpath',
	//   "$route": "updateRoute", // 监听url变化，会执行对应方法
	  "$store.getters.sessionValid": "sessionStateChanged",
	},
	activated () {
		printLog('OrganizationMain    activated');
	}
}

</script>

<style scoped lang="scss">
	@import '~scss_vars';
	
	.container {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;
		.main {
			display: flex;
			position: absolute;
			top: 0px;
			bottom: 0px;
			overflow: hidden;
			aside {
				flex:0 0 230px;
				width: 230px;
				.el-menu{
					height: 100%;
				}
				
			}
			.menu-expanded{
				background: #f1f2f7;
				flex:0 0 230px;
				width: 230px;
				.side-search-button{
					line-height: 40px;
					padding-left: 5px;
					width: 215px;
					padding-top: 2px;
				}

				.el-menu {
					border-right: solid 1px #f1f2f7;
					background-color: #f1f2f7; 
				}
			}
			.content-container {
				flex:1;
				height: 100%;
				overflow-y: scroll;
				padding: 20px;
				margin-right: 160px;
				background-color: #262A33;
			}
		}
	}

.tree_icon {
	position: relative;
    float: center;
    width: 15px;
    overflow: hidden;
}
.icon_role {
	position: relative;
    float: center;
    width: 15px;
    overflow: hidden;
}
.el-scrollbar {
	background: #f1f2f7;
}
</style>